<template>
  <!--    面包屑导航-->
    <div style="margin-top: 20px;margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item ><b>请假</b></el-breadcrumb-item>
            <el-breadcrumb-item>请假审批</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
  <!-- 表格 -->
    <div class="table-container">
        <el-table :data="tableData" stripe style="width: 100%;">
<!--            <el-table-column prop="snumber" label="学号" />-->
            <el-table-column prop="sname" label="学生姓名" />
            <el-table-column prop="leaveType" label="请假类型"/>
            <el-table-column prop="startTime" label="起始时间" />
            <el-table-column prop="endTime" label="结束时间"/>
            <el-table-column prop="contact" label="联系方式"/>
            <el-table-column prop="context" label="请假理由"  show-overflow-tooltip/>
            <el-table-column prop="state" label="请假状态" >
                <template #default="scope">
                    <el-button
                            plain
                            :type="getButtonType(scope.row)"

                    >
                        {{ getButtonText(scope.row) }}
                    </el-button>
                </template>
            </el-table-column>
<!--            <el-table-column prop="reason" label="审核理由"  show-overflow-tooltip/>-->
            <el-table-column label="操作" >
                <template #default="scope">
                <el-button type="success"
                           plain
                           round
                           @click="handlePass(scope.row.id)"
                           :disabled="scope.row.state === 1"
                >通过</el-button>
                <el-button type="danger"
                           plain
                           round
                           @click="handleReject(scope.row.id)"
                           :disabled="scope.row.state === 2"
                >驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
  <!-- 分页按钮 -->
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="pagination.currentPage"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
    <!-- 通过按钮对话框-->
    <el-dialog v-model="passDialog" title="通过申请" width="500">
        <el-form :model="form"  ref="formRef" label-width="100px">
            <el-form-item label="通过原因" prop="context">
                <el-input
                        v-model="form.reason"
                        style="width: 240px"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea"
                        placeholder="请输入通过原因"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handlePassCancel">取消</el-button>
                <el-button type="primary" @click="handlePassConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
  <!-- 驳回申请对话框-->
    <el-dialog v-model="rejectDialog" title="驳回申请" width="500">
        <el-form :model="form"  ref="formRef" label-width="100px">
            <el-form-item label="驳回原因" prop="context">
                <el-input
                        v-model="form.reason"
                        style="width: 240px"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea"
                        placeholder="请输入驳回原因"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleRejectCancel">取消</el-button>
                <el-button type="primary" @click="handleRejectConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import request8090 from "../../../../utils/request8090.js";
onMounted(() => {
    fetchLeaveInfo()
});
const tableData = ref([]);
// 获取请假信息
const fetchLeaveInfo = () => {
    request8090({
        url: '/admin/getleaves',
        method: 'GET',
        params: { currentPage: pagination.value.currentPage, size: pagination.value.pageSize },
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                tableData.value = res.data.data.records;
                pagination.value.total = res.data.data.total;
            } else {
                ElMessage.error('获取数据失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
}

// 提交申请的数据
const form = ref({
    reason: ''
})
const passDialog= ref(false)
const rejectDialog= ref(false)
//驳回按钮函数
const handleReject=(id)=>{
    sessionStorage.setItem("id", id);
    rejectDialog.value = true
}
//驳回对话框的取消按钮函数
const handleRejectCancel = () => {
    form.value.reason=''
    rejectDialog.value = false
}
//驳回对话框的确定按钮函数
const handleRejectConfirm = () => {

    request8090({
        url: '/admin/refuseleave',
        method: 'put',
        data: {
            id: sessionStorage.getItem("id"),
            reason: form.value.reason
        }
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                ElMessage.success('驳回成功');
                handleRejectCancel()
                fetchLeaveInfo()
            } else {
                ElMessage.error('驳回失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
}
//通过按钮函数
const handlePass=(id)=>{
    sessionStorage.setItem("id", id);
    passDialog.value = true
}
//通过对话框的确定按钮函数
const handlePassConfirm = () => {
    axios({
        url: 'http://localhost:8090/admin/passleave',
        method: 'put',
        data: {
            id: sessionStorage.getItem("id"),
            reason: form.value.reason
        }
    })
        .then(res => {
            if (res.data.errorCode === 200) {
                ElMessage.success('操作成功');
                handlePassCancel()
                fetchLeaveInfo()
            } else {
                ElMessage.error('操作失败');
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            ElMessage.error('请求失败');
        });
}
//通过对话框的取消按钮函数
const handlePassCancel = () => {
    form.value.reason=''
    passDialog.value = false
}


//初始化的默认分页大小
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
//显示行数大小改变时刷新页面
const handleSizeChange = (size) => {
    pagination.value.pageSize = size;
    fetchLeaveInfo();
}
//显示页数改变时刷新页面
const handleCurrentChange = (page) => {
    pagination.value.currentPage = page;
    fetchLeaveInfo();
}
//改变按钮状态
const getButtonType = (row) => {
    if (row.state === 1) {
        return 'success';
    } else if (row.state === 2) {
        return 'danger';
    } else {
        return 'info';
    }
}

// 按钮的字体显示
const getButtonText = (row) => {
    if (row.state === 1) {
        return '已批准';
    } else if (row.state === 2) {
        return '已驳回';
    } else {
        return '未审批';
    }
}
</script>

<style scoped>

</style>